<template>
  <div>
    <!--    添加按钮-->
    <div class="add" v-if="state1" v-show="state">
      <el-button
        size="mini"
        type="primary"
        plain
        @click="add">添加轮椅</el-button>
    </div>
    <!--    添加弹出框-->
    <div v-if="!state1" class="add1" >
      <el-form ref="form" :model="sizeForm1" label-width="80px" size="mini" style="width: 400px">
        <el-form-item label="轮椅类型:">
          <el-input v-model="sizeForm1.fuction"></el-input>
        </el-form-item>
<!--        <el-form-item label="所属医院:">-->
<!--          <el-input v-model="sizeForm1.hospitalName"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="所属医院:">
          <el-row class="demo-autocomplete" style="margin: auto;">
            <el-col :span="12">
              <el-autocomplete
                class="inline-input"
                style="min-width: 320px"
                v-model="sizeForm1.hospitalName"
                placeholder="请在选项中选择，否则无法创建"
                :fetch-suggestions="querySearch"
                :trigger-on-focus="false"
                @select="handleSelect"
                clearable
              ></el-autocomplete>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="轮椅描述:">
          <el-input v-model="sizeForm1.description"></el-input>
        </el-form-item>
        <el-form-item label="轮椅数量:" style="width: 150px">
          <el-input v-model="sizeForm1.number" ></el-input>
        </el-form-item>
        <el-form-item label="轮椅价格:" style="width: 150px">
          <el-input v-model="sizeForm1.price" ></el-input>
        </el-form-item>
        <el-form-item label="轮椅图片:">
          <el-upload
            ref="upload"
            action="http://192.168.43.81:8081/common/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="putImg"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="sizeForm1.imageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="addWheelchair">立即创建</el-button>
          <el-button @click="quxiao1">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="state" v-if="state1">
      <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 85%">
        <el-table-column
          align="center"
          label="轮椅类型"
          prop="fuction">
        </el-table-column>
        <el-table-column
          align="center"
          label="轮椅图片"
          prop="image">
        </el-table-column>
        <el-table-column
          align="center"
          label="所属医院"
          prop="hospitalName">
        </el-table-column>
        <el-table-column
          align="center"
          label="轮椅数量"
          prop="number">
        </el-table-column>
        <el-table-column
          align="center"
          label="轮椅租金价格"
          prop="price">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pager :pageNo="searchParams.pageNo" :pageSize="searchParams.pageSize" :total=$store.state.backstage.wheelchair.total :continues="5" @getPageNo="getPageNo"></pager>
    <!--    弹出框-->
    <div v-show="!state" class="add1">
      <el-form ref="form" :model="sizeForm" label-width="80px" size="mini" style="width: 400px">
        <el-form-item label="轮椅类型">
          <el-input v-model="sizeForm.fuction"></el-input>
        </el-form-item>
        <el-form-item label="所属医院">
          <el-input v-model="sizeForm.hospitalName"></el-input>
        </el-form-item>
        <el-form-item label="轮椅描述:">
          <el-input v-model="sizeForm.description"></el-input>
        </el-form-item>
        <el-form-item label="轮椅数量" style="width: 150px">
          <el-input v-model="sizeForm.number"></el-input>
        </el-form-item>
        <el-form-item label="租金价格" style="width: 150px" >
          <el-input v-model="sizeForm.price"></el-input>
        </el-form-item>
        <el-form-item label="轮椅图片:">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="sizeForm.imageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="updateWheelchair">立即修改</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import pager from "../pager";
export default {
  name:'wheelchairModule',
  data() {
    return {
      state:true,
      state1:true,
      dialogVisible: false,
      searchParams:{
        pageNo:1,
        pageSize:3,
      },
      sizeForm1: {
        hospitalId:'',
        fuction: '',
        hospitalName: '',
        number: '',
        description:'',
        price: '',
        imageUrl:''
      },
      sizeForm: {
        id:'',
        fuction: '',
        hospitalName: '',
        number: '',
        description:'',
        price: '',
        imageUrl:''
      },
      tableData: [],
      hospitals:[],
      restaurants: [],
      search: ''
    }
  },
  components:{
    pager
  },
  mounted() {
    //获取全部轮椅信息
    this.getData()
    this.getAllHospital()
    this.restaurants = this.loadAll();
  },
  methods: {
    getPageNo(pageNo){
      this.searchParams.pageNo = pageNo
      //再次请求
      this.getData()
    },
    async getData(){
      await this.$store.dispatch('getWheelchair',{page:this.searchParams.pageNo,pageSize:this.searchParams.pageSize})
      this.showWheelchair()
    },
    showWheelchair(){
      this.tableData.splice(0,this.tableData.length)
      this.$store.state.backstage.wheelchair.records.forEach((item)=>{
        let {id,hospitalName,image,fuction,number,price} = item
        let wheelchair = {
          id:id,
          hospitalName:hospitalName,
          image:image,
          fuction:fuction,
          number:number,
          price:price
        }
        this.tableData.push(wheelchair)
      })
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.state = false
      //清空输入框
      this.sizeForm = {fuction: '',number: '',description: '',price: ''}
      this.sizeForm.id = row.id
    },
    async handleDelete(index, row) {
      this.$confirm('此操作将永久删除该轮椅, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let id = row.id
        await this.$store.dispatch('deleteWheelchair', {id:id})
        await this.getData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async addWheelchair() {
      let {hospitalId,hospitalName,fuction,number,description,price} = this.sizeForm1;
      await this.$store.dispatch('addWheelchair',{hospitalId,hospitalName,fuction,number,description,price})
      if (this.$store.state.backstage.addWheelchair.code === 1){
        this.$message({
          message: this.$store.state.backstage.addWheelchair.data,
          type: 'success'
        });
        this.getData()
        this.quxiao1()
      }else {
        this.$message.error(this.$store.state.backstage.addWheelchair.msg);
      }
    },
    quxiao(){
      this.state = true
    },
    add(){
      this.state1 = false
      //清空输入框
      this.sizeForm1 = {wheelchairName: '',hospitalName: '',wheelchairNumber: '',wheelchairPrice: '',imageUrl: ''}
    },
    //  图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    putImg(response, file, fileList){
      console.log(response)
    },
    quxiao1(){
      this.state1 = true
    },
    async updateWheelchair(){
      let {id,hospitalName,fuction,number,description,price} = this.sizeForm;
      await this.$store.dispatch('updateWheelchairInfo',{id,hospitalName,fuction,number,description,price})
      if (this.$store.state.backstage.updateWheelchairInfo.code === 1){
        this.$message({
          message: this.$store.state.backstage.updateWheelchairInfo.data,
          type: 'success'
        });
        this.getData()
        this.quxiao()
      }else {
        this.$message.error(this.$store.state.backstage.updateWheelchairInfo.msg);
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    //获取全部医院
    async getAllHospital(){
      await this.$store.dispatch('getHospital')
      this.tableData.splice(0,this.tableData.length)
      this.$store.state.backstage.hospital.forEach((item)=>{
        const {id,name,location} = item
        let hospitalArr = {id:id,value:name,location:location}
        this.hospitals.push(hospitalArr)
      })
    },
    //获取医院id
    handleSelect(item){
      this.sizeForm1.hospitalId = item.id
    },
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return this.hospitals;
    },
  },
}
</script>

<style scoped>
.add{
  position:relative;
  top: 11px;
  right: 100px;
  float: right;
  width: 100px;
  height: 50px;
  z-index: 1000;
}
.add1{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>
